feat: useAnimatedKeyboard compat layer#1220
Conversation
📊 Package size report
|
| { | ||
| onStart: (e) => { | ||
| "worklet"; | ||
|
|
||
| state.set(e.height > 0 ? KeyboardState.OPENING : KeyboardState.CLOSING); | ||
| }, | ||
| onMove: (e) => { | ||
| "worklet"; | ||
|
|
||
| height.set(e.height); | ||
| }, | ||
| onInteractive: (e) => { | ||
| "worklet"; | ||
|
|
||
| height.set(e.height); | ||
| }, | ||
| onEnd: (e) => { | ||
| "worklet"; | ||
|
|
||
| state.set(e.height > 0 ? KeyboardState.OPEN : KeyboardState.CLOSED); | ||
| height.set(e.height); | ||
| }, | ||
| }, |
There was a problem hiding this comment.
Does it make sense to memoize this config object with useMemo?
There was a problem hiding this comment.
Hey @tomekzaw You know this part better, so I'll do whatever you say. But let me explain it a little bit. Internally useKeyboardHandler uses useEvent/useHandler hooks from REA. And I tried to have the same API as useAnimatedScrollHandler with only one difference - we attach handler to the view that is located in KeyboardProvider (it kind of makes sense because you have a single keyboard for whole app, but in case with ScrollView you may have multiple of them even on a single screen).
From what I saw useAnimatedScrollHandler doesn't memoize the config with useMemo, right? Is it very expensive to create such object? (from plain react creating an object is a very cheap operation, but I'm not sure about "worklet" part, I think it also should be fast?)
Anyway, the reason why I don't use useMemo is because I was trying to have the same API as useAnimatedScrollHandler and this hook doesn't use useMemo 🙃
There was a problem hiding this comment.
I've asked @tjzel about this (he's our expert on memoization and worklets)
There was a problem hiding this comment.
Yeah, I think useMemo isn't necessary here, the gains would probably be marginal.
3 participants
📜 Description
Added
useAnimatedKeyboardhook (same as in reanimated, but based on keyboard-controller API).💡 Motivation and Context
Based on software-mansion/react-native-reanimated#8622 we want to deliver as smooth as possible way to migrate from a deprecated API. In many cases people don't want to copy/paste code and manage it on their own, so in this PR I'm adding a proposed compat layer directly in the core of
react-native-keyboard-controller. Using this compat layer devs will just need:📢 Changelog
JS
useAnimatedKeyboard/KeyboardStateKeyboardStatetoIKeyboardStatesince it conflicts with reanimated name;🤔 How Has This Been Tested?
Tested via e2e tests that I didn't break anything accidentally.
📸 Screenshots (if appropriate):
📝 Checklist